<template>
    <div>
        <DetailAside class="aside"/>
        <div style="display: block">
            <DetailItem class="item" :goods="goods"/>
        </div>
    </div>
    <DetailTabBarFooter/>
</template>

<script>
    import DetailAside from "../../components/aside/DetailAside.vue";
    import DetailItem from "../../components/aside/DetailItem.vue";
    import DetailTabBarFooter from "../../components/tabBar/DetailTabBarFooter.vue";
    import {ShopDetails} from "../../api";

    export default {
        name: "OrderFood",
        components: {
            DetailAside, DetailItem, DetailTabBarFooter
        },
        data() {
            return {
                name: this.$route.query.query,
                goods: [],
            }
        },
        methods: {

        },
        mounted() {
            ShopDetails(`/${this.name}`).then(
                response => {
                    this.goods = response.data
                }
            )
        }
    }
</script>

<style scoped>
    div {
        display: flex;
        overflow: visible;
    }

    .aside {
        position: sticky;
        background: lightpink;
        top: 13vh;
        width: 20vw;
        height: 87vh;
        margin: 0;
    }
</style>